<template>
  <div>
    <MyHeader title="购物车" color="white" bgc="skyblue" fs="30px" />
    <div class="main">
      <MyGoods v-for="item in GoosList" :key="item.id" :item="item" :sum="item.goods_count"/>
    </div>

    <MyFooter :list="GoosList" />
  </div>
</template>

<script>
import MyCount from './components/MyCount.vue'
import MyFooter from './components/MyFooter.vue'
import MyGoods from './components/MyGoods.vue'
import MyHeader from './components/MyHeader.vue'

export default {
  name: 'App',
  data() {
    return {
      GoosList: [],
    }
  },
  components: {
    MyCount,
    MyFooter,
    MyGoods,
    MyHeader,
  },
  // 挂载周期获取数据
  mounted() {
    this.$axios({
      url: '/api/cart',
      method: 'GET',
    }).then((res) => {
      let {
        data: { list },
      } = res

      this.GoosList = list
      console.log(this.GoosList)
    })
  },
}
</script>

<style>
.main {
  margin: 45px 0;
}
</style>
